<template>
	<div class="h-7 rounded-full border border-border-1 flex items-center px-[10px]">
		<div class="text-sm text-t-3">{{ $t('betting.recent') }}</div>
		<div class="ml-1 flex items-center">
			<betting-outcome
				v-for="(item, index) in outcomes"
				:key="index"
				:outcome="item"
				class="ml-[2px]"></betting-outcome>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BettingOutcome from '../betting-outcome/index.vue'
import { BettingResult } from '@/enums'
const props = defineProps({
	data: {
		type: Array<BettingResult>,
		default: () => []
	}
})

const outcomes = computed(() => [BettingResult.default, ...props.data])
</script>
